<template>
<view>
    <view class="top-wrap">
        <view class="header">
            <view class="" :style="{ 'padding-top': marTop + 'px' }">
                <image @click="callback" class="icon_right" src="@/static/images/icon_white.png"></image>
                <text class="headerTitle">购物车</text>
            </view>
        </view>
    </view>
    <view class="shoppingCart copy-data">
        <view class="labelNav acea-row row-around">
            <view class="item">
                <text class="iconfont icon-xuanzhong"></text>
                100%正品保证
            </view>
            <view class="item">
                <text class="iconfont icon-xuanzhong"></text>
                所有商品精挑细选
            </view>
            <view class="item">
                <text class="iconfont icon-xuanzhong"></text>
                售后无忧
            </view>
        </view>
        <view class="borRadius14 cartBox" :style="{ 'padding-bottom': marTop + 'px' }">
            <view v-if="
              (cartList.valid.length === 0 && cartList.invalid.length === 0) ||
              cartList.valid.length > 0
            " class="nav acea-row row-between-wrapper">
                <view>
                    药品数量
                    <text class="num font-color">{{ cartCount || 0 }}</text>
                </view>
                <view v-if="cartList.valid.length > 0 || cartList.invalid.length > 0" class="administrate acea-row row-center-wrapper" @click="manage">
                    {{ footerswitch ? '管理' : '取消' }}
                </view>
            </view>
            <view v-if="cartList.valid.length > 0 || cartList.invalid.length > 0" class="pad30">
                <view class="list">
                    <checkbox-group @change="checkboxChange">
                        <block v-for="(item, index) in cartList.valid" :key="index">
                            <view class="item acea-row row-between-wrapper">
                                <!-- #ifndef MP -->
                                <checkbox :value="(item.id)" :checked="item.checked" :disabled="!item.attrStatus && footerswitch" style="margin-right: 10rpx;" />
                                <!-- #endif -->
                                <!-- #ifdef MP -->
                                <checkbox :value="item.id" :checked="item.checked" />
                                <!--  style="transform:scale(0.7);" -->
                                <!-- :disabled="!item.attrStatus && footerswitch"  -->
                                <!-- #endif -->
                                <!-- 商品详情页面链接 -->
                                <navigator :url="
                                  '/pagesSub/homePage/prescribing/mallMessage?medicalid=' +
                                  item.productId
                                " hover-class="none" class="picTxt acea-row row-between-wrapper">
                                    <view class="pictrue">
                                        <image :src="item.image"></image>
                                    </view>
                                    <view class="text">
                                        <view class="line1 line2Overflow" :class="item.id ? '' : 'reColor'" style="line-height:50rpx">
                                             <image class="yibaoTips" v-if='(item.medicalItemCode || item.medicalItemCode2) && item.medicalFlag == 1' src="../../static/images/chs.png" />
                                             <!-- <text class="yibaoTips" v-if='item.medicalItemCode'>省医保</text> -->
                                            {{ item.productName }}
                                        </view>
                                        <!-- <view class='infor line1' v-if="item.suk">属性：{{item.suk}}</view> -->
                                        <view class='infor line1'>
                                            <text style="width:60%;display: inline-block;">
                                                规格：{{item.specification || '暂无规格'}}
                                            </text>
                                            <view class="gray_font" style="
                                            float: right;
                                            margin-top: 7rpx;
                                            font-size: 26rpx;
                                        ">库存：{{item.stock || '1'}}</view>
                                        </view>
                                        <view class="money" v-if="item.price">
                                            ￥{{ item.price.toFixed(2) }}
                                        </view>
                                        <!-- <view class='money' v-if="item.attrStatus">￥{{item.truePrice}}</view> -->
                                        <!-- <view class="reElection acea-row row-between-wrapper" v-else>

<view class="title">请重新选择商品规格</view>

<view class="reBnt cart-color acea-row row-center-wrapper"

@click.stop="reElection(item)">重选</view>

</view> -->
                                    </view>
                                    <!-- 有效商品 -->
                                    <view class="carnum acea-row row-center-wrapper" v-if="item.delFlag != '1'">
                                        <view class="reduce" :class="item.numSub ? 'on' : ''" @click.stop="subCart(index)">
                                            -
                                        </view>
                                        <view class="num">{{ item.countNum }}</view>
                                        <view class="plus" :class="item.numAdd ? 'on' : ''" @click.stop="addCart(index)">
                                            +
                                        </view>
                                    </view>
                                </navigator>
                            </view>
                        </block>
                    </checkbox-group>
                </view>
                <!-- cartList.valid.length===0 && cartList.invalid.length > 0 -->
                <view v-if="cartList.invalid.length > 0" class="invalidGoods borRadius14" :style="
                  cartList.valid.length === 0 && cartList.invalid.length > 0
                    ? 'position: relative;z-index: 111;'
                    : 'position: static;'
                ">
                    <view class="goodsNav acea-row row-between-wrapper">
                        <view v-if="cartList.invalid.length > 1 || cartList.valid.length > 0" @click="goodsOpen">
                            <text class="iconfont" :class="
                              goodsHidden == true ? 'icon-xiangxia' : 'icon-xiangshang'
                            "></text>
                            失效商品
                        </view>
                        <view v-else>
                            失效商品
                        </view>
                        <view class="del" @click="unsetCart">
                            <text class="iconfont icon-shanchu1"></text>
                            清空
                        </view>
                    </view>
                    <view class="goodsList" :hidden="goodsHidden">
                        <block v-for="(item, index) in cartList.invalid" :key="index">
                            <view class="item acea-row row-between-wrapper">
                                <view class="invalid">失效</view>
                                <view class="picTxt acea-row row-between-wrapper">
                                    <view class="pictrue">
                                        <image :src="item.image"></image>
                                    </view>
                                    <view class="text acea-row row-column-between">
                                        <view class="line1 name">{{ item.productName }}</view>
                                        <!-- <view class='infor line1' v-if="item.suk">属性：{{item.suk}}</view> -->
                                        <view class="acea-row row-between-wrapper">
                                            <view class="end">该商品已失效</view>
                                        </view>
                                    </view>
                                </view>
                            </view>
                        </block>
                    </view>
                </view>
                <!-- <view class='loadingicon acea-row row-center-wrapper' v-if="cartList.valid.length&&!loadend">

<text class='loading iconfont icon-jiazai' :hidden='loading==false'></text>{{loadTitle}}

</view> -->
                <view class="loadingicon acea-row row-center-wrapper" v-if="cartList.invalid.length && loadend">
                    <text class="loading iconfont icon-jiazai" :hidden="loadingInvalid == false"></text>
                    {{ loadTitleInvalid }}
                </view>
            </view>
            <view class="noCart" v-if="cartList.valid.length == 0 && cartList.invalid.length == 0">
                <!-- && canShow" -->
                <view class="pictrue">
                    <image src="../../static/images/icon_lack_message@2x.png"></image>
                    <text class="">暂无商品，去添加点什么吧</text>
                </view>
                <!-- 热门推荐的插件 -->
                <!-- <recommend :hostProduct='hostProduct'></recommend> -->
            </view>
        </view>
    </view>
    <view class="footer acea-row row-between-wrapper" v-if="cartList.valid.length > 0">
        <view>
            <checkbox-group @change="checkboxAllChange">
                <checkbox value="all" :checked="!!isAllSelect" />
                <text class="checkAll">全选({{ selectValue.length }})</text>
            </checkbox-group>
        </view>
        <view class="money acea-row row-middle" v-if="footerswitch == true">
            <text class="font-color">￥{{ selectCountPrice.toFixed(2) }}</text>
            <form @submit="subOrder">
                <!-- 、report-submit='true' -->
                <button class="placeOrder bg-color" formType="submit">
                    选择就诊人
                </button>
            </form>
        </view>
        <view class="button acea-row row-middle" v-else>
            <!-- <form @submit="subCollect" report-submit='true'>

<button class='bnt cart-color' formType="submit">收藏</button>

</form> -->
            <form @submit="subDel">
                <!-- report-submit='true' -->
                <button class="bnt" formType="submit">删除</button>
            </form>
        </view>
    </view>
    <!-- <productWindow :attr="attr" :isShow='1' :iSplus='1' :iScart='1' @myevent="onMyEvent" @ChangeAttr="ChangeAttr"

@ChangeCartNum="ChangeCartNum" @attrVal="attrVal" @iptCartNum="iptCartNum" @goCat="reGoCat"

id='product-window'></productWindow> -->
    <view class="uni-p-b-96"></view>
    <view class="uni-p-b-98"></view>
</view>
</template>

<script>
let sysHeight = 0
import {
    getCartList,
    cartDel,
    cartAdd, //加入购物车
    preOrderApi,
} from '@/api/order.js'

import store from '@/store'
// import Cart from '@/utils/cart.js';
import {
    toLogin
} from '@/libs/login.js'
import {
    mapGetters
} from 'vuex'
export default {
    data() {
        return {
            cartCount: 0,
            goodsHidden: false,
            footerswitch: true,
            // hostProduct: [],  //热门推荐商品
            cartList: {
                valid: [],
                invalid: [],
            },
            isAllSelect: false, //全选
            selectValue: [], //选中的数据
            selectCountPrice: 0.0, //总价
            isAuto: false, //没有授权的不会自动授权
            isShowAuth: false, //是否隐藏授权
            // hotScroll: false,
            // hotPage: 1,
            // hotLimit: 10,
            loading: false,
            loadend: false,
            loadTitle: '加载更多', //提示语
            page: 1,
            limit: 20,
            loadingInvalid: false,
            loadendInvalid: false,
            loadTitleInvalid: '加载更多', //提示语
            pageInvalid: 1,
            limitInvalid: 20,
            attr: {
                cartAttr: false,
                productAttr: [],
                productSelect: {},
            },
            productValue: [], //系统属性
            productInfo: {},
            attrValue: '', //已选属性
            attrTxt: '请选择', //属性页面提示
            cartId: 0,
            product_id: 0,
            // sysHeight: sysHeight,
            canShow: false,
            marTop: 0,
            allPrice: 0, //总价
            storeId: 0, //绑定医生的id
        }
    },
    computed: mapGetters(['isLogin']),
    onLoad: function (options) {
        let that = this
        if (that.isLogin == false) {
            toLogin()
        }
    },
    onShow: function () {
        this.canShow = false //true//
        // 登录后
        if (this.isLogin == true) {
            // this.cartList = store.state.app.shopCarList;  //缓存中获取购物车数据
            // this.hotPage = 1;
            // this.hostProduct = [];
            // this.hotScroll = false,
            // this.loadend = false;
            this.page = 1
            this.cartList.valid = [
                // {
                // 		id: 1,
                // 		attrStatus: 11, //库存
                // 		checked: 0, //是否选中 boolean
                // 		productId: 1,
                // 		image: '../../static/images/icon_h_jd@2x.png',
                // 		storeName: '商品名称',
                // 		suk: '23', //属性、规格
                // 		price: 9.00, //单价
                // 		cartNum: 2,//数量
                // 	}
            ]
            this.getCartList() //查询购物车列表数据
            this.loadendInvalid = false
            this.pageInvalid = 1
            this.cartList.invalid = []
            // this.getInvalidList();  //查询失效列表
            //this.getCartNum();  //查询总商品数
            this.footerswitch = true
            this.isAllSelect = false //false; //全选
            this.selectValue = [] //this.cartList.valid; //[]; //选中的数据项
            this.selectCountPrice = 0.0 //135.00;
            this.cartCount = this.cartList.valid.length // 0;
            this.isShowAuth = false
            // 绑定的医生id
            this.storeId = store.state.app.storeId
        }
        const res = wx.getMenuButtonBoundingClientRect()
        this.marTop = res.top + 5
    },
    methods: {
        callback() {
            const pages = getCurrentPages()
            // console.log('pages----',pages)
            if (pages.length === 1) {
                uni.switchTab({
                    url: '/pages/homePage/shopList',
                })
            } else {
                uni.navigateBack()
            }
        },
        // 删除调用接口
        subDel: function (event) {
            let that = this,
                storeId = 0,
                selectValue = that.selectValue
            if (selectValue.length > 0) {
                if (this.storeId || store.state.app.storeId) {
                    storeId = this.storeId || store.state.app.storeId
                }
                // 走删除接口
                cartDel(selectValue, storeId).then((res) => {
                    that.loadend = false
                    that.page = 1
                    that.cartList.valid = []
                    that.getCartList()
                    // that.getCartNum();
                })
            } else {
                return that.$util.Tips({
                    title: '请选择产品',
                })
            }
        },

        // 立即预约
        subOrder: function (event) {
            let that = this,
                selectValue = that.selectValue,
                newArr = []
            // console.log(selectValue, typeof selectValue, '下单的数据id---999--')
            if (selectValue.length > 0) {
                let arr = []
                // 将selectValue转成数组
                for (let i in selectValue) {
                    let o = {}
                    arr.push(selectValue[i])
                }

                newArr = that.cartList.valid.filter((item) => {
                    for (let i = 0; i < arr.length; i++) {
                        let selectItem = arr[i]
                        if (item.id == selectItem) {
                            return item
                        }
                    }
                })
                // console.log(newArr, '新的 数据 -----------')
                that.getPreOrder(newArr)
            } else {
                return that.$util.Tips({
                    title: '请选择产品',
                })
            }
        },
        /**
         * 预下单
         */
        getPreOrder: function (newArr) {
            let products = newArr.map((item) => {
                return {
                    id: Number(item.productId),
                    count: Number(item.countNum),
                    name: item.productName,
                    img: item.image,
                    price: item.price,
                    specification: item.specification, //规格
                    stock:item.stock,
                    medicalItemCode:item.medicalItemCode,  //医保标识code
                    medicalItemCode2:item.medicalItemCode2,  //医保标识code
                    medicalFlag:item.medicalFlag   //医保标识
                    // drugChannel:this.drugData.drugChannel //厂家
                }
            })
            let medicals = encodeURIComponent(JSON.stringify(products))

            uni.navigateTo({
                url: `/pagesSub/homePage/prescribing/mallChoose?medicals=${medicals}`,
            })
        },
        checkboxAllChange: function (event) {
            let value = event.detail.value
            if (value.length > 0) {
                this.setAllSelectValue(1)
            } else {
                this.setAllSelectValue(0)
            }
        },
        // 全选、不全选
        setAllSelectValue: function (status) {
            let that = this
            let selectValue = []
            let valid = that.cartList.valid
            // console.log(valid,'数据0000---')
            if (valid.length > 0) {
                let newValid = valid.map((item) => {
                    if (status) {
                        // 全选
                        if (that.footerswitch) {
                            if (item.delFlag == '0') {
                                item.checked = true
                                selectValue.push(item.id)
                            } else {
                                item.checked = false
                            }
                        } else {
                            item.checked = true
                            selectValue.push(item.id)
                        }
                        that.isAllSelect = true
                    } else {
                        // 取消全选
                        item.checked = false
                        that.isAllSelect = false
                    }
                    return item
                })
                that.$set(that.cartList, 'valid', newValid)
                that.selectValue = selectValue //选中的商品列表
                // console.log(selectValue, 999999)
                that.switchSelect()
            }
        },
        // 选中某个商品
        checkboxChange: function (event) {
            let that = this
            // console.log(event, '选中的event', that.footerswitch)
            let value = event.detail.value //id组成的数组
            let valid = that.cartList.valid
            let arr1 = []
            let arr2 = []
            let arr3 = []
            let newValid = valid.map((item, index) => {
                if (that.inArray(item.id, value)) {
                    if (that.footerswitch) {
                        if (item.delFlag == '0') {
                            item.checked = true
                            arr1.push(item)
                        } else {
                            item.checked = false
                        }
                    } else {
                        item.checked = true
                        arr1.push(item)
                    }
                } else {
                    item.checked = false
                    arr2.push(item)
                }
                return item
            })
            if (that.footerswitch) {
                arr3 = arr2.filter((item) => item.delFlag != '0') //过滤出失效的 （！=0）
            }
            that.$set(that.cartList, 'valid', newValid)
            // let newArr = that.cartList.valid.filter(item => item.attrStatus);
            that.isAllSelect = newValid.length === arr1.length + arr3.length
            that.selectValue = value //选中的是id
            that.switchSelect()
        },
        inArray: function (search, array) {
            // if (JSON.stringify(array).indexOf('id') != -1) {
            // 	// array含有id属性
            // 	for (let i in array) {
            // 		if (array[i].id == search) {
            // 		return true;
            // 		}
            // 	}
            // } else {
            // array是纯数组
            for (let i in array) {
                if (array[i] == search) {
                    return true
                }
            }
            // }
            return false
        },
        switchSelect: function () {
            let that = this
            let validList = that.cartList.valid
            let selectValue = that.selectValue //选中的商品id组成的数组 是不是购物车全部数据
            let selectCountPrice = 0.0
            if (selectValue.length < 1) {
                that.selectCountPrice = selectCountPrice
            } else {
                for (let index in validList) {
                    if (that.inArray(validList[index].id, selectValue)) {
                        selectCountPrice = that.$util.$h.Add(
                            selectCountPrice,
                            that.$util.$h.Mul(
                                validList[index].countNum,
                                validList[index].price,
                            ),
                        )
                    }
                }
                that.selectCountPrice = selectCountPrice
            }
        },

        //  数量--
        subCart: function (index) {
            let that = this
            let status = false
            let item = that.cartList.valid[index]
            item.countNum = Number(item.countNum) - 1
            if (item.countNum < 1) status = true
            if (item.countNum <= 1) {
                item.countNum = 1
                item.numSub = true
            } else {
                item.numSub = false
                item.numAdd = false
            }
            if (false == status) {
                that.setCartNum(item.productId, 'sub', item.countNum, function (data) {
                    that.cartList.valid[index] = item
                    that.switchSelect()
                })
            }
        },
        // 数量加+
        addCart: function (index) {
            let that = this
            let item = that.cartList.valid[index]
            item.countNum = Number(item.countNum) + 1
            let productInfo = item
            if (item.countNum >= item.stock) {
                item.countNum = item.stock
                item.numAdd = true
                item.numSub = false
            } else {
                item.numAdd = false
                item.numSub = false
            }
            that.setCartNum(item.productId, 'add', item.countNum, function (data) {
                that.cartList.valid[index] = item
                that.switchSelect()
            })
        },
        setCartNum(cartId, type, countNum, successCallback) {
            let that = this

            /**

 * 

productId	number	 必须 商品主键		countNum	number	 必须 默认1		type	number	 必须 类型：1 添加数量，2 减少数量		uid	number	 必须 小程序用户uid		storeId

 * */
            let data = {
                productId: cartId,
                countNum: 1,
                type: type == 'add' ? 1 : 2,
                uid: store.state.app.uid,
                storeId: store.state.app.storeId, //药店id
            }
            // if (this.storeId || store.state.app.storeId) {
            //   // 绑定的医生id
            //   data.storeId = this.storeId || store.state.app.storeId
            // }
            // 修改购物车数量购物车--会返回购物数量
            cartAdd(data)
                .then((res) => {
                    that.cartCount = res.data //购物总数量
                    successCallback && successCallback(res.data)
                })
                .catch((err) => {
                    this.$util.Tips({
                        title: err,
                    })
                })
        },

        // getCartNum: function() {
        // 	let that = this;
        // 	//  获取总数量---接口还没有 先用之前的
        // 	// getCartCounts().then(res => {
        // 	// 	that.cartCount = res.data;
        // 	// });
        // },
        getCartData(data) {
            return new Promise((resolve, reject) => {
                getCartList(data)
                    .then((res) => {
                        uni.hideLoading()
                        resolve(res.data)
                    })
                    .catch(function (err) {
                        this.loading = false
                        uni.hideLoading()
                        this.canShow = true
                        this.$util.Tips({
                            title: err,
                        })
                    })
            })
        },

        /**
         * 购物车数量加和数量减
         *
         */
        // ChangeCartNum: function(changeValue) {
        // 	//changeValue:是否 加|减
        // 	//获取当前变动属性
        // 	let productSelect = this.productValue[this.attrValue];
        // 	//如果没有属性,赋值给商品默认库存
        // 	if (productSelect === undefined && !this.attr.productAttr.length)
        // 		productSelect = this.attr.productSelect;
        // 	//无属性值即库存为0；不存在加减；
        // 	if (productSelect === undefined) return;
        // 	let stock = productSelect.stock || 0;
        // 	let num = this.attr.productSelect;
        // 	if (changeValue) {
        // 		num.cart_num++;
        // 		if (num.cart_num > stock) {
        // 		this.$set(this.attr.productSelect, "cart_num", stock ? stock : 1);
        // 		this.$set(this, "cart_num", stock ? stock : 1);
        // 		}
        // 	} else {
        // 		num.cart_num--;
        // 		if (num.cart_num < 1) {
        // 		this.$set(this.attr.productSelect, "cart_num", 1);
        // 		this.$set(this, "cart_num", 1);
        // 		}
        // 	}
        // },
        // 查询购物车列表
        async getCartList() {
            // uni.showLoading({
            //     title: '加载中',
            //     // mask: true
            // })
            let that = this
            //   storeId = 0
            // if (store.state.app.storeId) {
            //   // 绑定的医生id
            //   storeId = store.state.app.storeId
            // }
            let data = {
                // storeId:store.state.app.storeId,
                storeId: store.state.app.storeId || '', //药店id
            }
            let resObj = await that.getCartData(data)
            let resList = resObj.list || []
            resList &&
                resList.map((item) => {
                    if (item.delFlag == '1' || item.stock == '0') {
                        // /delFlag,"0"有效，"1"无效
                        that.cartList.invalid.push(item)
                    } else {
                        that.cartList.valid.push(item)
                    }
                })
            let validList = that.cartList.valid
            // 减号的disabled状态
            let numSub = [{
                    numSub: true,
                },
                {
                    numSub: false,
                },
            ]
            // +号的disabled状态
            let numAdd = [{
                        numAdd: true,
                    },
                    {
                        numAdd: false,
                    },
                ],
                selectValue = []
            if (validList.length > 0) {
                for (let index in validList) {
                    // 初始化数量为1时，-号禁用
                    if (validList[index].countNum == 1) {
                        validList[index].numSub = true
                    } else {
                        validList[index].numSub = false
                    }
                    let productInfo = validList[index]
                    let stock = validList[index].stock ? validList[index].stock : 0
                    if (validList[index].countNum == stock) {
                        validList[index].numAdd = true
                    } else if (validList[index].countNum == validList[index].stock) {
                        validList[index].numAdd = true
                    } else {
                        validList[index].numAdd = false
                    }
                    if (validList[index].delFlag == '0') {
                        validList[index].checked = true //初始化获取列表选中商品
                        selectValue.push(validList[index].id)
                    } else {
                        validList[index].checked = false
                    }
                }
            }
            that.$set(that.cartList, 'valid', validList)

            that.cartCount = resObj.totalNumber
            that.selectValue = selectValue
            let newArr = validList.filter((item) => {
                // 把所有有效的（==0）过滤出来
                return item.delFlag == '0'
            })
            that.isAllSelect = newArr.length == selectValue.length && newArr.length
            that.switchSelect()
        },

        // 失效商品折叠方法
        goodsOpen: function () {
            let that = this
            that.goodsHidden = !that.goodsHidden
        },
        // 管理/取消按钮的方法
        manage: function () {
            let that = this
            that.footerswitch = !that.footerswitch
            let arr1 = []
            let arr2 = []
            let newValid = that.cartList.valid.map((item) => {
                if (that.footerswitch) {
                    if (item.delFlag == '0') {
                        if (item.checked) {
                            arr1.push(item.id)
                        }
                    } else {
                        item.checked = false
                        arr2.push(item)
                    }
                } else {
                    if (item.checked) {
                        arr1.push(item.id)
                    }
                }
                return item
            })
            that.cartList.valid = newValid
            if (that.footerswitch) {
                that.isAllSelect = newValid.length === arr1.length + arr2.length
            } else {
                that.isAllSelect = newValid.length === arr1.length
            }
            that.selectValue = arr1
            that.switchSelect()
        },
        // 清空失效商品
        unsetCart: function () {
            let that = this,
                ids = [],
                storeId = 0
            for (let i = 0, len = that.cartList.invalid.length; i < len; i++) {
                ids.push(that.cartList.invalid[i].id)
            }
            if (this.storeId || store.state.app.storeId) {
                storeId = this.storeId || store.state.app.storeId
            }

            cartDel(ids, storeId)
                .then((res) => {
                    that.$util.Tips({
                        title: '清除成功',
                    })
                    that.cartCount = res.data
                    that.$set(that.cartList, 'invalid', []) //失效列表清空
                    // that.getHostProduct();
                })
                .catch((res) => {})
        },

        // 获取推荐产品
        // getHostProduct: function() {
        // 	let that = this;
        // 	if (that.hotScroll) return
        // 	getProductHot(
        // 		that.hotPage,
        // 		that.hotLimit,
        // 	).then(res => {
        // 		that.hotPage++
        // 		that.hotScroll = res.data.list.length < that.hotLimit
        // 		that.hostProduct = that.hostProduct.concat(res.data.list)
        // 	});
        // },

        /**
         * 购物车手动填写
         *
         */
        // iptCartNum: function(e) {
        // 	this.$set(this.attr.productSelect, 'cart_num', e);
        // },

        /**
         * 购物车手动填写
         *
         */
        // iptCartNum: function(index) {
        // 	let item = this.cartList.valid[index];
        // 	if (item.cartNum) {
        // 		this.setCartNum(item.id, item.cartNum);
        // 	}
        // 	this.switchSelect();
        // },

        //// 收藏方法调用的
        // getSelectValueProductId: function() {
        // 	let that = this;
        // 	let validList = that.cartList.valid;
        // 	let selectValue = that.selectValue;
        // 	let productId = [];
        // 	if (selectValue.length > 0) {
        // 		for (let index in validList) {
        // 		if (that.inArray(validList[index].id, selectValue)) {
        // 		productId.push(validList[index].productId);
        // 		}
        // 		}
        // 	};
        // 	return productId;
        // },

        // 收藏
        // subCollect: function(event) {
        // 	let that = this,
        // 		selectValue = that.selectValue;
        // 	if (selectValue.length > 0) {
        // 		let selectValueProductId = that.getSelectValueProductId();
        // 		collectAll(that.getSelectValueProductId()).then(res => {
        // 		return that.$util.Tips({
        // 		title: '收藏成功',
        // 		icon: 'success'
        // 		});
        // 		}).catch(err => {
        // 		return that.$util.Tips({
        // 		title: err
        // 		});
        // 		});
        // 	} else {
        // 		return that.$util.Tips({
        // 		title: '请选择产品'
        // 		});
        // 	}
        // },

        // blurInput: function(index) {
        // 	let item = this.cartList.valid[index];
        // 	if (!item.cartNum) {
        // 		item.cartNum = 1;
        // 		this.$set(this.cartList, 'valid', this.cartList.valid)
        // 	}
        // },
        // 授权关闭--没用
        // authColse: function(e) {
        // 	this.isShowAuth = e;
        // },
        // 注释
        // 修改购物车
        // reGoCat: function() {
        // 	let that = this,
        // 		productSelect = that.productValue[this.attrValue];
        // 	//如果有属性,没有选择,提示用户选择
        // 	if (
        // 		that.attr.productAttr.length &&
        // 		productSelect === undefined
        // 	)
        // 		return that.$util.Tips({
        // 		title: "产品库存不足，请选择其它"
        // 		});

        // 	let q = {
        // 		id: that.cartId,
        // 		productId: that.product_id,
        // 		num: that.attr.productSelect.cart_num,
        // 		unique: that.attr.productSelect !== undefined ?
        // 		that.attr.productSelect.unique : that.productInfo.id
        // 	};
        // 	getResetCart(q)
        // 		.then(function(res) {
        // 		that.attr.cartAttr = false;
        // 		that.$util.Tips({
        // 		title: "添加购物车成功",
        // 		success: () => {
        // 		that.loadend = false;
        // 		that.page = 1;
        // 		that.cartList.valid = [];
        // 		that.getCartList();
        // 		that.getCartNum();
        // 		}
        // 		});
        // 		})
        // 		.catch(res => {
        // 		return that.$util.Tips({
        // 		title: res
        // 		});
        // 		});
        // },
        // onMyEvent: function() {
        // 	this.$set(this.attr, 'cartAttr', false);
        // },
        // reElection: function(item) {
        // 	this.getGoodsDetails(item)
        // },
        /**
         * 获取产品详情
         *
         */
        // getGoodsDetails: function(item) {
        // 	uni.showLoading({
        // 		title: '加载中',
        // 		mask: true
        // 	});
        // 	let that = this;
        // 	that.cartId = item.id;
        // 	that.product_id = item.productId;
        // 	getProductDetail(item.productId).then(res => {
        // 		uni.hideLoading();
        // 		that.attr.cartAttr = true;
        // 		let productInfo = res.data.productInfo;
        // 		that.$set(that, 'productInfo', productInfo);
        // 		that.$set(that.attr, 'productAttr', res.data.productAttr);
        // 		that.$set(that, 'productValue', res.data.productValue);
        // 		that.DefaultSelect();
        // 	}).catch(err => {
        // 		uni.hideLoading();
        // 	})
        // },
        /**
         * 属性变动赋值
         *
         */
        // ChangeAttr: function(res) {
        // 	let productSelect = this.productValue[res];
        // 	if (productSelect && productSelect.stock > 0) {
        // 		this.$set(this.attr.productSelect, "image", productSelect.image);
        // 		this.$set(this.attr.productSelect, "price", productSelect.price);
        // 		this.$set(this.attr.productSelect, "stock", productSelect.stock);
        // 		this.$set(this.attr.productSelect, "unique", productSelect.id);
        // 		this.$set(this.attr.productSelect, "cart_num", 1);
        // 		this.$set(this, "attrValue", res);
        // 		this.$set(this, "attrTxt", "已选择");
        // 	} else {
        // 		this.$set(this.attr.productSelect, "image", this.productInfo.image);
        // 		this.$set(this.attr.productSelect, "price", this.productInfo.price);
        // 		this.$set(this.attr.productSelect, "stock", 0);
        // 		this.$set(this.attr.productSelect, "unique", this.productInfo.id);
        // 		this.$set(this.attr.productSelect, "cart_num", 0);
        // 		this.$set(this, "attrValue", "");
        // 		this.$set(this, "attrTxt", "请选择");
        // 	}
        // },
        /**
         * 默认选中属性
         *
         */
        // DefaultSelect: function() {
        // 	let productAttr = this.attr.productAttr;
        // 	let value = [];
        // 	for (let key in this.productValue) {
        // 		if (this.productValue[key].stock > 0) {
        // 		value = this.attr.productAttr.length ? key.split(",") : [];
        // 		break;
        // 		}
        // 	}
        // 	for (let i = 0; i < productAttr.length; i++) {
        // 		this.$set(productAttr[i], "index", value[i]);
        // 	}
        // 	//sort();排序函数:数字-英文-汉字；
        // 	let productSelect = this.productValue[value.sort().join(",")];
        // 	if (productSelect && productAttr.length) {
        // 		this.$set(
        // 		this.attr.productSelect,
        // 		"storeName",
        // 		this.productInfo.storeName
        // 		);
        // 		this.$set(this.attr.productSelect, "image", productSelect.image);
        // 		this.$set(this.attr.productSelect, "price", productSelect.price);
        // 		this.$set(this.attr.productSelect, "stock", productSelect.stock);
        // 		this.$set(this.attr.productSelect, "unique", productSelect.id);
        // 		this.$set(this.attr.productSelect, "cart_num", 1);
        // 		this.$set(this, "attrValue", value.sort().join(","));
        // 		this.$set(this, "attrTxt", "已选择");
        // 	} else if (!productSelect && productAttr.length) {
        // 		this.$set(
        // 		this.attr.productSelect,
        // 		"storeName",
        // 		this.productInfo.storeName
        // 		);
        // 		this.$set(this.attr.productSelect, "image", this.productInfo.image);
        // 		this.$set(this.attr.productSelect, "price", this.productInfo.price);
        // 		this.$set(this.attr.productSelect, "stock", 0);
        // 		this.$set(this.attr.productSelect, "unique", this.productInfo.id);
        // 		this.$set(this.attr.productSelect, "cart_num", 0);
        // 		this.$set(this, "attrValue", "");
        // 		this.$set(this, "attrTxt", "请选择");
        // 	} else if (!productSelect && !productAttr.length) {
        // 		this.$set(
        // 		this.attr.productSelect,
        // 		"storeName",
        // 		this.productInfo.storeName
        // 		);
        // 		this.$set(this.attr.productSelect, "image", this.productInfo.image);
        // 		this.$set(this.attr.productSelect, "price", this.productInfo.price);
        // 		this.$set(this.attr.productSelect, "stock", this.productInfo.stock);
        // 		this.$set(
        // 		this.attr.productSelect,
        // 		"unique",
        // 		this.productInfo.id || ""
        // 		);
        // 		this.$set(this.attr.productSelect, "cart_num", 1);
        // 		this.$set(this, "attrValue", "");
        // 		this.$set(this, "attrTxt", "请选择");
        // 	}
        // },
        // attrVal(val) {
        // 	this.$set(this.attr.productAttr[val.indexw], 'index', this.attr.productAttr[val.indexw].attrValues[val
        // 		.indexn]);
        // },
    },

    onReachBottom() {
        let that = this
        // if (that.loadend) {
        // 	that.getInvalidList();
        // }
        // if (that.cartList.valid.length == 0 && that.cartList.invalid.length == 0 && this.hotPage != 1) {
        // 	that.getHostProduct();
        // }
        const res = wx.getMenuButtonBoundingClientRect()
        this.marTop = res.top + 5
    },
}
</script>

<style lang="scss" scoped>
@import '@/static/css/style.css';

.invalidClas {
    position: relative;
    z-index: 111;
    top: -120rpx;
}

.invalidClasNO {
    position: static;
    margin-top: 15px;
}

.cartBox {
    // margin-bottom: 70rpx;
    // background-color: #fff;
}

.acea-row {
    display: -webkit-box;
    display: -moz-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-lines: multiple;
    -moz-box-lines: multiple;
    -o-box-lines: multiple;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

.acea-row.row-middle {
    -webkit-box-align: center;
    -moz-box-align: center;
    -o-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
}

.acea-row.row-top {
    -webkit-box-align: start;
    -moz-box-align: start;
    -o-box-align: start;
    -ms-flex-align: start;
    -webkit-align-items: flex-start;
    align-items: flex-start;
}

.acea-row.row-bottom {
    -webkit-box-align: end;
    -moz-box-align: end;
    -o-box-align: end;
    -ms-flex-align: end;
    -webkit-align-items: flex-end;
    align-items: flex-end;
}

.acea-row.row-center {
    -webkit-box-pack: center;
    -moz-box-pack: center;
    -o-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
}

.acea-row.row-right {
    -webkit-box-pack: end;
    -moz-box-pack: end;
    -o-box-pack: end;
    -ms-flex-pack: end;
    -webkit-justify-content: flex-end;
    justify-content: flex-end;
}

.acea-row.row-left {
    -webkit-box-pack: start;
    -moz-box-pack: start;
    -o-box-pack: start;
    -ms-flex-pack: start;
    -webkit-justify-content: flex-start;
    justify-content: flex-start;
}

.acea-row.row-between {
    -webkit-box-pack: justify;
    -moz-box-pack: justify;
    -o-box-pack: justify;
    -ms-flex-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between;
}

.acea-row.row-around {
    justify-content: space-around;
    -webkit-justify-content: space-around;
}

.acea-row.row-column-around {
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    justify-content: space-around;
    -webkit-justify-content: space-around;
}

.acea-row.row-column {
    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    -o-box-orient: vertical;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
}

.acea-row.row-column-between {
    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    -o-box-orient: vertical;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: justify;
    -moz-box-pack: justify;
    -o-box-pack: justify;
    -ms-flex-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between;
}

.acea-row.row-center-wrapper {
    -webkit-box-align: center;
    -moz-box-align: center;
    -o-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    -webkit-box-pack: center;
    -moz-box-pack: center;
    -o-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
}

.acea-row.row-between-wrapper {
    -webkit-box-align: center;
    -moz-box-align: center;
    -o-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    -webkit-box-pack: justify;
    -moz-box-pack: justify;
    -o-box-pack: justify;
    -ms-flex-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between;
}

.top-wrap {
    // height:320rpx;
    // height: 330rpx;
    width: 100%;
    top: -8rpx;
    z-index: 10;
}

.header {
    position: fixed;
    top: 0;
    background: #4dcbbd;
    color: #ffffff;
    // height: 320rpx;
    z-index: 999;
    width: 100%;
    text-align: center;
}

.header>.headerTitle {
    color: #ffffff;
    font-size: 37rpx;
}

.icon_right {
    width: 55rpx;
    height: 55rpx;
    float: left;
}

.shoppingCart {
    margin-top: 315rpx; //267rpx; //
    /* #ifdef H5 */
    // padding-bottom: 0;
    // padding-bottom: constant(safe-area-inset-bottom);
    // padding-bottom: env(safe-area-inset-bottom);
    /* #endif */
}

.shoppingCart .labelNav {
    height: 220rpx;
    padding: 86rpx 30rpx 0; // 30rpx 30rpx 0;
    font-size: 22rpx;
    color: #fff;
    position: fixed;
    left: 0;
    top: 94rpx;
    width: 100%;
    box-sizing: border-box;
    background-color: #4dcbbd;
    z-index: 5;
}

.shoppingCart .labelNav .item .iconfont {
    font-size: 25rpx;
    margin-right: 10rpx;
}

.shoppingCart .nav {
    width: 92%;
    height: 90rpx;
    background-color: #fff;
    padding: 0 24rpx;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    font-size: 30rpx;
    color: #282828;
    position: fixed;
    left: 30rpx;
    top: 228rpx;
    z-index: 6;
    border-top-left-radius: 14rpx;
    border-top-right-radius: 14rpx;
}

.shoppingCart .nav .num {
    margin-left: 12rpx;
}

.shoppingCart .nav .administrate {
    font-size: 30rpx;
    color: #333333;
}

.shoppingCart .noCart {
    background-color: #fff;
    // padding-top: 0.1rpx;
    padding: 10rpx;
}

.shoppingCart .noCart .pictrue {
    width: 414rpx;
    height: 414rpx;
    margin: 100rpx auto;
}

.shoppingCart .noCart .pictrue image {
    width: 100%;
    height: 100%;
}

.shoppingCart .noCart .pictrue text {
    // text-align: center;
    margin: 0 auto;
    font-size: 30rpx;
    color: #999999;
}

.shoppingCart .list {
    width: 100%;
    margin-top: 126rpx; //178rpx;
    overflow: hidden;
    border-bottom-left-radius: 14rpx;
    border-bottom-right-radius: 14rpx;
}

.shoppingCart .list .item {
    padding: 24rpx;
    background-color: #fff;
}

.shoppingCart .list .item .picTxt {
    width: 580rpx;
    position: relative;
}

.shoppingCart .list .item .picTxt .pictrue {
    width: 160rpx;
    height: 160rpx;
}

.shoppingCart .list .item .picTxt .pictrue image {
    width: 100%;
    height: 100%;
    border-radius: 6rpx;
}

.shoppingCart .list .item .picTxt .text {
    width: 396rpx;
    font-size: 30rpx;
    color: #282828;
}

.shoppingCart .list .item .picTxt .text .reColor {
    color: #999;
}

.shoppingCart .list .item .picTxt .text .reElection {
    margin-top: 20rpx;
}

.shoppingCart .list .item .picTxt .text .reElection .title {
    font-size: 24rpx;
}

.shoppingCart .list .item .picTxt .text .reElection .reBnt {
    width: 120rpx;
    height: 46rpx;
    border-radius: 23rpx;
    font-size: 26rpx;
}

.shoppingCart .list .item .picTxt .text .infor {
    font-size: 26rpx;
    color: #999999;
    height:70rpx;
    //   margin-top: 16rpx;
}

.shoppingCart .list .item .picTxt .text .money {
    font-size: 32rpx;
    color: #e93323;
    //   margin-top: 28rpx;
    font-weight: 600;
}

.shoppingCart .list .item .picTxt .carnum {
    height: 47rpx;
    position: absolute;
    bottom: -4rpx;
    right: 0;
}

.shoppingCart .list .item .picTxt .carnum view {
    border: 1rpx solid #a4a4a4;
    width: 66rpx;
    text-align: center;
    height: 100%;
    line-height: 44rpx;
    font-size: 30rpx;
    color: #a4a4a4;
}

.shoppingCart .list .item .picTxt .carnum .reduce {
    border-right: 0;
    border-radius: 3rpx 0 0 3rpx;
    border-radius: 22rpx 0rpx 0rpx 22rpx;
    font-size: 34rpx;
    line-height: 40rpx;
}

.shoppingCart .list .item .picTxt .carnum .reduce.on {
    border-color: #e3e3e3;
    color: #dedede;
}

.shoppingCart .list .item .picTxt .carnum .plus {
    border-left: 0;
    border-radius: 0 3rpx 3rpx 0;
    border-radius: 0rpx 22rpx 22rpx 0rpx;
    font-size: 34rpx;
    line-height: 40rpx;
}

.shoppingCart .list .item .picTxt .carnum .num {
    color: #282828;
}

.shoppingCart .invalidGoods {
    background-color: #fff;
    margin-top: 30rpx;
    /* #ifdef MP-WEIXIN */
    // margin-top: 140rpx;
    /* #endif */
}

.shoppingCart .invalidGoods .goodsNav {
    width: 100%;
    height: 90rpx;
    padding: 0 24rpx;
    box-sizing: border-box;
    font-size: 30rpx;
    color: #333333;
}

.shoppingCart .invalidGoods .goodsNav .iconfont {
    color: #424242;
    font-size: 30rpx;
    margin-right: 17rpx;
}

.shoppingCart .invalidGoods .goodsNav .del {
    font-size: 26rpx;
    color: #333;
}

.shoppingCart .invalidGoods .goodsNav .del .icon-shanchu1 {
    color: #333;
    font-size: 33rpx;
    vertical-align: -2rpx;
    margin-right: 8rpx;
}

.shoppingCart .invalidGoods .goodsList .item {
    padding: 24rpx;
}

.shoppingCart .invalidGoods .goodsList .picTxt {
    width: 576rpx;
}

.shoppingCart .invalidGoods .goodsList .item .invalid {
    font-size: 22rpx;
    color: #cccccc;
    height: 36rpx;
    border-radius: 3rpx;
    text-align: center;
    line-height: 36rpx;
}

.shoppingCart .invalidGoods .goodsList .item .pictrue {
    width: 160rpx;
    height: 160rpx;
}

.shoppingCart .invalidGoods .goodsList .item .pictrue image {
    width: 100%;
    height: 100%;
    border-radius: 6rpx;
}

.shoppingCart .invalidGoods .goodsList .item .text {
    width: 396rpx;
    font-size: 30rpx;
    color: #999;
    height: 140rpx;
}

.shoppingCart .invalidGoods .goodsList .item .text .name {
    width: 100%;
}

.shoppingCart .invalidGoods .goodsList .item .text .infor {
    font-size: 24rpx;
}

.shoppingCart .invalidGoods .goodsList .item .text .end {
    font-size: 26rpx;
    color: #bbb;
}

.footer {
    z-index: 119;
    width: 100%;
    min-height: 110rpx;
    background-color: #fff;
    position: fixed;
    padding: 10rpx 24rpx 20rpx;
    box-sizing: border-box;
    border-top: 1rpx solid #eee;
    // border-bottom: 1px solid #EEEEEE;
    /* #ifdef H5 */
    bottom: 98rpx;
    /* #endif */
    /* #ifdef MP */
    bottom: 0;
    /* #endif */
    /* #ifndef MP */
    bottom: 98rpx;
    bottom: calc(98rpx+ constant(safe-area-inset-bottom)); ///兼容 IOS<11.2/
    bottom: calc(98rpx + env(safe-area-inset-bottom)); ///兼容 IOS>11.2/
    /* #endif */
    // 兼容ios底部
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);
    // box-sizing:content-box;
}

.footer .checkAll {
    font-size: 30rpx;
    color: #282828;
    margin-left: 14rpx;
}

.footer .money {
    font-size: 30rpx;

    .font-color {
        font-weight: 600;
    }
}

.footer .placeOrder {
    color: #fff;
    font-size: 30rpx;
    width: 226rpx;
    height: 70rpx;
    border-radius: 50rpx;
    text-align: center;
    line-height: 70rpx;
    margin-left: 22rpx;
}

.footer .bg-color {
    background: -webkit-linear-gradient(#77e2a4, #4ccdbc) !important;
    // background-color: #4DCBBD !important;  // #E93323 !important
}

.footer .button .bnt {
    font-size: 30rpx;
    color: #999;
    border-radius: 50rpx;
    border: 1px solid #999;
    width: 160rpx;
    height: 70rpx;
    text-align: center;
    line-height: 70rpx;
}

.footer .button form~form {
    margin-left: 17rpx;
}

.uni-p-b-96 {
    height: 96rpx;
}

</style>
